<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        //必须有宽高，否则会出现初始化不聚合
        <button onclick="add2()">使用添加代码添加聚合图2</button>
        <button onclick="add3()">聚合图样式1</button>
        <button onclick="add4()">聚合图样式2</button>
        <hr>
        <button onclick="add()">geojson聚合图</button>
        <button onclick="flyTo()">飞到</button>
        <button onclick="remove()">移除聚合图</button>
      
    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>

    <script src="../libs/cpc/index.js"></script>
    <script>
        var layer = null;
        const map = new cpc.Map({
            container: "cesiumContainer",
            camera: {
                position: {
                    x: 119.3006147,
                    y: 26.0316619,
                    z: 4809,
                },
                angle: {
                    heading: 7.33,
                    pitch: -72.53,
                    roll: 0,
                },
                duration: 3,
                complete: () => {
                    console.log("飞行结束了");
                }
            },
            baseMaps: [
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            ]
        });
        function flyTo() {
            layer.flyTo();
        }
        function add() {
            const option = {
                url: "../json/cluser/cluserPoint.json",
            }
            layer = new cpc.CluserGeoJsonLayer("聚合图", option);
            layer.setRenderer({
                type: "uniqueValue",
                field: "CameraType",
                symbol: {
                    billboard: {
                        image: "../images/point/blueCamera.png",
                        width: 30,
                        height: 42,
                    }
                },
                uniqueValueInfos: [
                    {
                        value: "3",
                        symbol: {
                            billboard: {
                                image: "../images/point/start.png",
                                width: 30,
                                height: 42,
                            }
                        },
                    },
                    {
                        value: "4",
                        symbol: {
                            billboard: {
                                image: "../images/point/end.png",
                                width: 30,
                                height: 42,
                            }
                        },
                    }
                ]
            })
            map.add(layer);

        }
        function remove() {
            map.remove(layer);
        }
        function add2() {
            const layer1 = new cpc.CluserLayer("x");
            for (var i = 0; i < 1000; i++) {
                var x = 119 + Math.random() * 0.1
                var y = 26 + Math.random() * 0.1
                layer1.add({
                    position: {
                        x: x,
                        y: y,
                        z: 0,
                    },
                    billboard: {
                        image: '../images/point/blueCamera.png',
                        width: 30,
                        height: 42,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        scale: 1,
                    }
                })
            }
            map.add(layer1);

        }
        function add3() {
            const layer1 = new cpc.CluserLayer("xs", {
                enabled: true,
                pixelRange: 100,
                minimumClusterSize: 5,
                cluster: {
                    type: cpc.ECluserLayerType.circle,
                    label: {
                        size: 30,
                        color: "#fff",
                        font: "微软雅黑"
                    },
                    colors: [//必须从小到大
                        {
                            value: 3,
                            color: "#0f0"
                        },
                        {
                            value: 30,
                            color: "#2f3dff"
                        },
                        {
                            value: 50,
                            color: "#4cfffa"
                        },
                        {
                            value: 100,
                            color: "#ff0"
                        },
                        {
                            value: 500,
                            color: "#ff570a"
                        },
                        {
                            value: 1000,
                            color: "#f00"
                        }
                    ]
                }
            });
            for (var i = 0; i < 1000; i++) {
                var x = 119 + Math.random() * 0.5
                var y = 26 + Math.random() * 0.5
                layer1.add({
                    position: {
                        x: x,
                        y: y,
                        z: 0,
                    },
                    billboard: {
                        image: '../images/point/blueCamera.png',
                        width: 30,
                        height: 42,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        scale: 1,
                    }
                })
            }
            map.add(layer1);

        }
        function add4() {
            const layer1 = new cpc.CluserLayer("xsx", {
                enabled: true,
                pixelRange: 100,
                minimumClusterSize: 5,
                cluster: {
                    type: cpc.ECluserLayerType.shine,
                    label: {
                        size: 30,
                        color: "#fff",
                        font: "微软雅黑"
                    },
                    colors: [//必须从小到大
                        {
                            value: 3,
                            color: "#0f0"
                        },
                        {
                            value: 30,
                            color: "#2f3dff"
                        },
                        {
                            value: 50,
                            color: "#4cfffa"
                        },
                        {
                            value: 100,
                            color: "#ff0"
                        },
                        {
                            value: 500,
                            color: "#ff570a"
                        },
                        {
                            value: 1000,
                            color: "#f00"
                        }
                    ]
                }
            });
            for (var i = 0; i < 1000; i++) {
                var x = 119 + Math.random() * 0.5
                var y = 26 + Math.random() * 0.5
                layer1.add({
                    position: {
                        x: x,
                        y: y,
                        z: 0,
                    },
                    billboard: {
                        image: '../images/point/blueCamera.png',
                        width: 30,
                        height: 42,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        scale: 1,
                    }
                })
            }
            map.add(layer1);

        }
    </script>
</body>

</html>